全域變體

Joy UI 提供一組全域變體，以確保您的應用程式在各處保持一致性。

所有 Joy UI 元件都接受四種全域變體：solid、soft、outlined 和 plain。這些變體旨在涵蓋現代網頁設計中的大多數使用情境。

以下示範展示了這些變體在多個 Joy UI 元件中的外觀和感覺

按鈕

晶片

Solid

Soft

Outlined

Plain

核取方塊

SolidSoftOutlinedPlain

全域變體從單一來源提取其樣式，幫助您確保在預先建置的 Joy UI 元件和您建立的任何自訂元件之間，外觀和風格保持一致。

在底層，這些變體主要通過它們的 color、background 和 border CSS 屬性的值來區分。

重要性層級

每個變體在使用者介面中傳達不同的重要性層級

solid 最適合用於主要元素和頁面上最重要的操作
soft、outlined 和 plain 更適合用於次要和第三級操作

您應該選擇哪個變體很大程度上取決於設計中的上下文，但重要的是要記住這個層級結構，以實現平衡的 UI。

以下示範說明了使用多種變體的均衡設計

照片上傳

自訂全域變體

全域變體建立在調色盤的原子 tokens 之上，這些 tokens 存在於您應用程式的主題中。您可以使用標準 CSS 或 CSS 變數來自訂這些屬性。

以下是一些預設 solid 變體 tokens 的範例

{
  colorSchemes: {
    light: {
      palette: {
        primary: {
          solidBg: 'var(--joy-palette-primary-600)',       // the initial background
          solidColor: '#fff',                              // the initial color
          solidHoverBg: 'var(--joy-palette-primary-700)',  // the :hover background
          solidActiveBg: 'var(--joy-palette-primary-800)', // the :active background
          // ...other tokens
        },
        neutral: {
          solidBg: 'var(--joy-palette-primary-700)',
          solidColor: '#fff',
          solidHoverBg: 'var(--joy-palette-primary-800)',
          solidActiveBg: 'var(--joy-palette-primary-900)',
          // ...other tokens
        },
        // ...other palettes
      }
    },
    dark: {
      palette: {
        // similar structure but different values
      }
    },
  }
}